<template>
    <div class='video'>
        <public-head>
            <span>视频库</span>
        </public-head>
        <div class="sub-nav">
            <div class="item" @click="showtype = !showtype,showclassify = false" :class="{'open': showtype}">全部
                <i :class="[showtype ? 'icon-arrow-up': 'icon-arrow-down']"></i>
            </div>
            <div class="item" @click="showclassify = !showclassify,showtype = false" :class="{'open': showclassify}">分类
                <i :class="[showclassify ? 'icon-arrow-up': 'icon-arrow-down']"></i>
            </div>
            <transition name="fade">
                <div class="video-type" v-show="showtype">
                    <ul>
                        <li :class="{'selected':item.selected}" v-for="(item,index) in videotype" @click="selectType(item,index)" :key="item.id">
                            <span>{{item.key}}</span>
                        </li>
                    </ul>
                </div>
            </transition>
            <transition name="fade">
                <div class="classify" v-show="showclassify">
                    <ul>
                        <li :class="{'selected':item.selected}" v-for="(item,index) in classify" @click="selectClassify(item,index)" :key="item.id">
                            <span>{{item.key}}</span>
                        </li>
                    </ul>
                </div>
            </transition>
        </div>
        <ul class="case-list" v-if="videoLists.length">
            <router-link :to="{path:'/video/' + video.id}" tag="li" v-for="(video,index) in videoLists" :key="video.id">
                <div class="left">
                    <img :src="video.img">
                    <div class="icon-video"></div>
                </div>
                <div class="right">
                    <h2 class="title">{{ video.title }}</h2>
                    <p class="introduce">{{ video.intro.substr(0,40) }}</p>
                </div>
            </router-link>
        </ul>
        <noitem v-else>
            <p slot="tip">暂无视频</p>
        </noitem>
        <transition name="fade">
            <div class="overlay" v-if="showtype || showclassify" v-on:click="closeoverlay"></div>
        </transition>
        <loading v-if="is_loading"></loading>
    </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
    data() {
        return {
            showtype: false, // 显示所属行业列表
            showclassify: false, // 显示产品分类
            videotype: [], // 所属行业列表数据
            classify: [], // 视频分类
            videoLists: [], // 视频列表
            fil_charge:'', //
            fil_type:'' // 
        }
    },
    created() {
        this.isLoading(true)
        /*
            获取数据字典
        */
        // 获取视频是否收费
        this.axios.post(root + '/api/common/getDictList', { code: 'charge_type' }).then((res) => {
            this.videotype = res.data.data
        })
        // 获取视频分类
        this.axios.post(root + '/api/common/getDictList', { code: 'video_type' }).then((res) => {
            this.classify = res.data.data
        })
        //获取列表
        this.fetchDate()
    },
    methods: {
        fetchDate(charge = '',type = '') {
            this.axios.post(root + '/api/industry/videoList', {filter_charge:charge,filter_type:type}).then((res)=>{
                this.isLoading(false)
                this.videoLists = res.data.data.videoList
            })
            this.showclassify = this.showtype = false
        },
        selectType(item, index) {
            this.videotype.forEach((item, num) => {
                index == num ? 
                (item.selected = true,this.fil_charge = item.value,this.fetchDate(this.fil_charge,this.fil_type))
                : item.selected = false
            })
        },
        selectClassify(item, index) {
            this.classify.forEach((item, num) => {
                index == num ? 
                (item.selected = true,this.fil_type = item.value,this.fetchDate(this.fil_charge,this.fil_type))
                : item.selected = false
            })
        },
        closeoverlay() {
            this.showtype = this.showclassify = false
        },
        ...mapActions(['isLoading'])
    },
    computed: {
        ...mapState(['is_loading'])
    }
}
</script>
<style lang="less" scoped>
@import '../../common/style/mixin.less';
@import '../../common/style/transition.less';
.video {
    .init;
    .sub-nav {
        position: relative;
        .layout-between-height;
        height: .9rem;
        background: #fff;
        .bor1pxTop;
        z-index: 10000;
        .item {
            flex: 1;
            .ft(.24rem);
            color: #222;
            line-height: .9rem;
            .tc;
            i {
                .wh(.18rem, .11rem);
                margin-left: .09rem;
            }
            i.icon-arrow-down {
                background: url('./arrow-down.png') no-repeat;
                background-size: contain;
            }
            i.icon-arrow-up {
                background: url('./arrow-up.png') no-repeat;
                background-size: contain;
            }
            &.open {
                color: #5b91fe;
                font-weight: 600;
            }
        }
    }
    .video-type,
    .classify {
        position: absolute;
        left: 0;
        top: .9rem;
        width: 100%;
        background: #fff;

        li {
            display: -webkit-flex;
            align-items: center;
            .ft(.24rem);
            color: #222;
            .bor1pxTop;
            line-height: .9rem;
            padding-left: .32rem;
        }
        .selected {
            position: relative;
            color: #5b91fe;
            &:after {
                content: '';
                position: absolute;
                right: 0;
                top: 0;
                .wh(.41rem,
                .41rem);
                background: url('./icon-selected.png') no-repeat;
                background-size: contain;
            }
        }
    }
    .case-list {
        li {
            display: -webkit-flex;
            background: #fff;
            padding: .24rem .29rem;
            box-shadow: 0 3px 5px 0 #d0d0d0;
            margin-top: .2rem;
            .left {
                position: relative;
                .wh(1.52rem,
                1.52rem);
                margin-right: .29rem;
                img {
                    .wh(100%,
                    100%);
                    border-radius: 2px;
                    outline: none;
                }
                .icon-video{
                    position:absolute;
                    left:0;
                    top:0;
                    width:100%;
                    height: 100%;
                    border-radius: 2px;
                    background-color: rgba(0,0,0,0.3);
                    background-image: url('./video.png');
                    background-size:0.4rem 0.4rem;
                    background-position: center;
                    background-repeat: no-repeat;
                }
            }
            .right {
                flex: 1;
                .ft(.24rem);
                .title {
                    width: 5rem;
                    color: #404040;
                    line-height: 0.3rem;
                    margin-bottom: .18rem;
                    margin-top: .1rem;
                    .textoverflow;
                }
                .introduce {
                    color: #999;
                    line-height: .45rem;
                }
            }
        }
    }
}
.overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
}
</style>